Day 9：Resize

2019 iT 邦幫忙鐵人賽

DAY 9

Modern Web

Phaser 幫我撐個 30 天系列第 9 篇

2019鐵人賽

團隊浪流連九程式匠自然產生的佛系碼農專區

2018-10-24 09:22:37

4702 瀏覽

分享至

》Resize
目前我們的遊戲寬高設為 640 x 320，但我們希望可以在任何視窗、裝置大小可以填滿整個畫面，讓遊戲體驗能夠更好，更加完善。

原本的狀況，如圖：

》HTML、CSS 內容

<head>
    .....
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

body {
    margin: 0;
    background-color: #000000;
}
canvas {
    position: absolute;
    top: 50%:
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
}

》Javascript 內容
在 onload 的時候，去執行 resize 並偵聽它。

window.onload = function() {
    function resize() {
        let canvas = document.querySelector('canvas')
        let ww = window.innerWidth
        let wh = window.innerHeight
        let wRatio =  ww / wh
        let gameRatio = config.width / config.height
        if (wRatio < gameRatio) {
            canvas.style.width = ww + 'px'
            canvas.style.height = ( ww / gameRatio ) + 'px'
        } else {
            canvas.style.width = ( wh * gameRatio ) + 'px'
            canvas.style.height = wh + 'px'
        }
    }
    resize()
    window.addEventListener('resize', resize, false)	// 偵聽事件 resize
}

》結論
今天我們偵聽 resize，重新計算遊戲畫面大小並調整，希望能讓使用者體驗更好。